<template>
  <div>
    <!-- <input
      type="text"
      v-maxlength="10"
      v-model="ipt"
    > -->
    <!-- <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      v-maxlength="20"
      v-model="ipt"
    ></textarea> -->

    <!-- <maxNub
      type="input"
      maxlength="10"
    /> -->
    <maxNub
      type="textarea"
      maxlength="30"
    />
  </div>
</template>

<script>
import maxNub from "./iptNub";

export default {
  data() {
    return {
      ipt: "",
    };
  },
  directives: {
    maxlength: {
      inserted(el, binding) {
        let parentWp = el.parentNode;
        let iptWp = document.createElement("div");
        let span = document.createElement("span");
        parentWp.replaceChild(iptWp, el);
        iptWp.appendChild(el);
        iptWp.appendChild(span);
        iptWp.style = "position:relative;";
        
        if (el.tagName == "TEXTAREA") {
          span.style =
            " position:absolute; bottom:8px; right:5px; font-size:10px; color:#999";
        } else if (el.tagName == "INPUT") {
          span.style =
            " position:absolute; top:5px; right:3px; font-size:10px; color:#999";
        }

        span.innerHTML = `0 / ${binding.value}`;
        el.setAttribute("maxlength", binding.value);
      },
      update(el, binding) {
        let iptLen = el.value.length;
        let span = el.nextElementSibling;
        span.innerHTML = `${iptLen} / ${binding.value}`;
        if (iptLen == binding.value) {
          el.style.color = "red";
        } else {
          el.style.color = "";
        }
      },
    },
  },
  components: {
    maxNub,
  },
};
</script>

<style scoped>
</style>